<template>
  <div>
    <!--三级分类卡片-->
    <el-card>
      <!--idChange: 当三级分类分类数据产生切换时触发-->
      <CategorySelector @categoryChange="categoryChange"></CategorySelector>
    </el-card>
    <!--spuList列表的显示界面  / spuList列表的新增&编辑界面-->
    <el-card style="margin: 20px 0">
      <!--spuList列表的显示界面-->
      <div v-show="!showAddOrUpdate&&!showAddSku">
        <!--添加按钮-->
        <el-button type="primary" icon="el-icon-circle-plus-outline"
                   :disabled="!category3Id" @click="showAdd">添加SPU</el-button>
        <!--SPU列表-->
        <el-table style="margin: 20px 0" border :data="spuList" v-loading="loading">
          <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
          <el-table-column align="center" label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column align="center" label="SPU描述" width="480" prop="description"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <HintButton title="添加SKU" type="primary" icon="el-icon-circle-plus-outline"
                          size="mini" @click="showAddSkuFn(row)"></HintButton>
              <HintButton title="查看所有SKU" type="info" icon="el-icon-info"
                          size="mini" @click="showSkuList(row)"></HintButton>
              <HintButton title="修改SPU" type="primary" icon="el-icon-edit"
                          size="mini" @click="showEdit(row)"></HintButton>

              <el-popconfirm :title="`确定删除${row.spuName}吗？`" @onConfirm="delSpu(row.id)">
                <HintButton slot="reference" title="删除SPU" type="danger" icon="el-icon-delete"
                            size="mini"></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          style="text-align: center"
          background
          layout="prev, pager, next, jumper,  ->, sizes, total"
          :current-page="page"
          :pager-count="5"
          :page-sizes="[3,6,9]"
          :page-size="limit"
          :total="total"
          @current-change="changePage"
          @size-change="changeSize">
        </el-pagination>
      </div>

      <!--spuList列表的新增&编辑界面-->
      <addOrUpdate v-show="showAddOrUpdate" ref="addOrUpdate" @success="getSpuList(page)"></addOrUpdate>
      <!--<addOrUpdate :showList.sync="showList"></addOrUpdate>-->
      <!--<addOrUpdate :showList="showList" @update:showList="showList = $event"></addOrUpdate>-->

      <!--新增sku界面-->
      <addSku v-show="showAddSku" ref="addSku"></addSku>

      <el-dialog :title="`${spu.spuName}=>SKU列表`" :visible.sync="dialogTableVisible">
        <el-table :data="skuList" v-loading="loading2">
          <el-table-column property="date" label="名称" prop="skuName"></el-table-column>
          <el-table-column property="name" label="价格" prop="price"></el-table-column>
          <el-table-column property="address" label="重量" prop="weight"></el-table-column>
          <el-table-column property="address" label="默认图片" >
            <template slot-scope="{row}">
              <img :src="row.skuDefaultImg" width="100px" height="100px">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import addOrUpdate from "./addOrUpdate"
  import addSku from "./addSku"
  export default {
    name: 'SpuList',
    data(){
      return {
        category1Id:"",
        category2Id:"",
        category3Id:"",
        spuList:[],  //[{spuName,description...},{}] spu列表
        loading:false,//spu列表的loading效果

        page:1, //当前页码
        limit:3, //每页显示多少数据 这个值一定要在page-sizes中找
        total:0,

        //showList:true, //控制spu列表界面是否显示
        showAddOrUpdate:false, // 控制spu新增、修改界面是否显示
        showAddSku:false,    //控制sku新增是否显示

        dialogTableVisible:false, //控制sku列表界面是否显示
        skuList:[], //sku列表
        spu:{}, //具体的一个spu
        loading2:false //sku列表的loading效果
      }
    },
    methods:{
      //显示新增sku界面  row:spu
      showAddSkuFn({id,tmId,spuName}){
        //显示新增sku界面
        this.showAddSku = true;
        // 组装要携带给addSku的数据
        const data = {
            spuName,
            spuId:id,
            tmId:tmId,
            category1Id:this.category1Id,
            category2Id:this.category2Id,
            category3Id:this.category3Id
        }
        //带给addSku
        this.$refs.addSku.initData(data)
      },
      //显示sku列表
      async showSkuList(row){
        this.spu = row;
        this.dialogTableVisible = true;
        //发送请求获取sku列表
        this.loading2 = true;
        const {data} = await this.$API.sku.getListBySpuId(row.id);
        this.loading2 = false;
        this.skuList = data;
      },
      //新增一个spu
      showAdd(){
        //显示新增界面
        this.showAddOrUpdate = true;
        //清空表单数据
        this.$refs.addOrUpdate.clearForm()
        //做一些必要的数据填充 品牌下拉列表 销售属性下拉列表
        this.$refs.addOrUpdate.initDataForAdd(this.category3Id)
      },
      //删除一个spu 根据id
      async delSpu(spuId){
        await this.$API.spu.remove(spuId);
        this.$message("删除spu成功");
        //刷新界面
        this.getSpuList(this.page)
      },
      // 显示列表界面的方法 （addOrUpdate addSku组件来调用）
      showListFn(){
        this.showAddOrUpdate = false;
        this.showAddSku = false;
      },
      //显示编辑界面
      showEdit(row){
        //显示修改界面
        this.showAddOrUpdate = true;
        //调用addOrUpdate组件的方法来实时的获取数据
        this.$refs.addOrUpdate.initData(row.id)
      },
      //当三级分类的id产生变化时 自动调用的函数
      categoryChange({categoryId,level}){
        //当三级分类产生变化的时候 我们要发送请求去获取分类对应的属性数据
        switch (level){
          case 1:
            //当一级分类产生变化 当前组件中的category2Id category3Id arrs得重置
            this.category1Id = categoryId;
            this.category2Id = "";
            this.category3Id = "";
            this.spuList = []
            break;
          case 2:
            //当二级分类产生变化 当前组件中的category3Id arrs得重置
            this.category2Id = categoryId;
            this.category3Id = "";
            this.spuList = []
            break;
          case 3:
            this.category3Id = categoryId;
            this.getSpuList()
            break;
        }
      },
      //改变每页显示数量的函数
      changeSize(size){
        //size:新的每页数量
        this.limit = size;
        //默认显示第一页
        this.getSpuList()
      },
      //改变页码的函数
      changePage(pageNo){
        this.getSpuList(pageNo)
      },
      //发送请求获取spu列表
      async getSpuList(pageNo=1){
        this.page = pageNo;
        this.loading = true;
        const {data:{records,total}} = await this.$API.spu.getSpuList(this.page,this.limit,this.category3Id);
        this.loading = false;
        this.spuList = records;
        this.total = total;
      }
    },
    async mounted(){
      await this.getSpuList(1)
    },
    components:{
      addOrUpdate,
      addSku
    }
  }
</script>
